<template>
    <view class="custom-nav" :style="{ height: navHeight + 'px' }">
        <view class="nav-content" :style="{ top: statusBarHeight + 'px' }">
            <!-- 左侧返回按钮 -->
            <view class="left-area" v-if="showBack" @click="goBack">
                <view class="back-icon">
                    <uni-icons type="back" size="22" color="#000"></uni-icons>
                </view>
            </view>

            <!-- 中间标题 -->
            <view class="title">{{ title }}</view>

            <!-- 右侧区域 -->
            <view class="right-area">
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'CustomNav',
    props: {
        title: {
            type: String,
            default: ''
        },
        showBack: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            statusBarHeight: 0, // 状态栏高度
            navHeight: 0, // 导航栏总高度
        }
    },
    created() {
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync()
        // 获取状态栏高度
        this.statusBarHeight = systemInfo.statusBarHeight
        // 设置导航栏总高度 (状态栏高度 + 44)
        this.navHeight = systemInfo.statusBarHeight + 44
    },
    methods: {
        goBack() {
            uni.navigateBack({
                delta: 1
            })
        }
    }
}
</script>

<style lang="scss">
.custom-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #8CB22C;

    z-index: 999;

    .nav-content {
        position: relative;
        height: 44px;
        display: flex;
        align-items: center;

        .left-area {
            position: absolute;
            left: 0;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 15px;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            color: #E1E1D1;
            font-weight: bold;
        }

        .right-area {
            position: absolute;
            right: 0;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 15px;
        }
    }
}
</style>